跳到主要内容

CSS 字体

阐述

通常在 font-family 属性中指定一系列不同的字体,并使浏览器依次选取可用的字体。字体栈的最后一个通常指定为类别,即 serif, sans-serif, monospacecursive 中的一个。

字件分为本地字体和网络字体;网络字体需要在加载时下载以显示,可用的选项为

  • Google font
  • Vercel Fontsource
  • 自己服务器上的字体,用 CSS 字体册的方式注册,并可以控制字体加载行为

实例

.title {
font-family: Lato, Futura, Helvetica, Arial, sans-serif;
}

近年来的趋势是使用「系统字体栈」,即选取各个系统上最好的默认字体,例如

html {

  --font-sans-serif:
    -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
    helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;

  --font-serif:
    Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
    Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol;

  /* Set a global default */
  font-family: var(--font-sans-serif);
}

字体册的实例:

@font-face {
font-family: 'Wotfard',
src: url('/fonts/wotfard-ragular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

性质

相关内容

参考文献